<template>
  <div class="category">
    <breadcrumb></breadcrumb>

    <!-- 商品分类卡片制作开始 -->
    <el-card>
      <!-- 添加分类的按钮的制作开始 -->
      <el-row>
        <el-col :span=5>
          <el-button type="primary" @click="addcate">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 分类商品表格制作开始 -->
        <el-table :data="CategoryList" style="width: 100%" row-key="cat_id" :tree-props="{children: 'children', hasChildren: 'hasChildren',  }">
          <el-table-column prop="cat_name" label="分类名称">
          </el-table-column>
          <el-table-column prop="cat_deleted" label="是否有效" >
            <template slot-scope="scope">
              <i class="el-icon-success" v-if="scope.row.cat_deleted == false" style="color:lightgreen"></i>
              <i class="el-icon-error" v-else style="color:red"></i>
            </template>
          </el-table-column>
          <el-table-column prop="cat_pid" label="排序">
            <template slot-scope="scope">
              <el-tag size="mini" effect="dark" v-if="scope.row.cat_level == 0">一级</el-tag>
              <el-tag size="mini" effect="dark" type="success" v-else-if="scope.row.cat_level == 1">二级</el-tag>
              <el-tag size="mini" effect="dark" type="danger" v-else>三级</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="cat_name" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit"  size="mini" @click="editcate(scope.row)">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="deletecate(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页功能的制作开始 -->
        <el-pagination @size-change="SizeChange" @current-change="CurrentChange"
          :current-page="queryInfo.pagenum"  :page-sizes="[1,2,5,10]" :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper" :total="totallist">
        </el-pagination>
        <!-- 编辑分类页面的制作开始 -->
        <el-dialog title="修改分类" :visible.sync="editdialogVisible" width="50%">
            <el-form ref="editcateref" :model="editcateform" :rules="editcaterules" label-width="80px">
            <el-form-item label="分类名称" prop="cat_name">
              <el-input v-model="editcateform.cat_name"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button @click="closeedit">取 消</el-button>
          <el-button type="primary" @click="confirmedit">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 添加分类页面的制作开始 -->
        <el-dialog title="添加分类" :visible.sync="adddialogVisible" width="50%" @close="addcateclose">
            <el-form ref="addcateref" :model="addcateform" :rules="addcaterules" label-width="80px">
              <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="addcateform.cat_name"></el-input>
              </el-form-item>
              <el-form-item label="父级分类" >
                <!-- 级联选择器的options绑定的是数据源 -->
                <!-- 级联选择的props是决定数据源的显示方式 -->
               <el-cascader expand-trigger="hover" :options="parentcatelist" :props="cateprops" v-model="selectcateid" 
               @change="catelevelchange" change-on-select class="cascader" clearable>
               </el-cascader>
              </el-form-item>
            </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button >取 消</el-button>
          <el-button type="primary" @click="confirmaddcate">确 定</el-button>
          </span>
        </el-dialog>
    </el-card>
  </div>
</template>

<script>

import breadcrumb from "../../component/content/breadcrumb.vue"
import {netrequest} from "../../network/request.js"

export default {
  name:'categrry',
  components:{
    breadcrumb
  },
  data(){
    return{
      CategoryList:[],
      queryInfo:{
        type:3,
        pagenum:1,
        pagesize:5
      },
      totallist:null,
      editdialogVisible:false,
      editcateform:{},
      editcaterules:{
        cat_name:[
          { required: true, message: '请输入正确的分类名称', trigger: 'blur' },
           { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ]
      },
      adddialogVisible:false,
      addcateform:{
        cat_name:'',
        cat_pid:0,
        cat_level:0
      },
      addcaterules:{
        cat_name:[
           { required: true, message: '请输入正确的分类名称', trigger: 'blur' },
           { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ]
      },
      // 数据源太多此时一定要设置el-cascader-menu的高度，否则数据渲染会有问题
      parentcatelist:[]
      ,
      cateprops:{
        value:'cat_id',
        label:'cat_name',
        children:'children'
      },
      selectcateid:[]
    }
  },
  methods:{
    // 向服务器请求商品分类的数据
    async GetCategoryList(){
      const {data:res} = await netrequest({method:'get',url:'/categories',params:this.queryInfo})
       console.log(res);
       if(res.meta.status !==200) return this.$message.error(res.meta.msg)
       this.CategoryList = res.data.result
       this.totallist = res.data.total
    },
    // 页面显示条数改变，更新原有的条数，然后向服务器发送请求
    SizeChange(newsize){
      this.queryInfo.pagesize = newsize
      this.GetCategoryList()
    },
    // 页码改变，更新原有的页码，然后向服务器发送请求
    CurrentChange(newpage){
      this.queryInfo.pagenum = newpage
      this.GetCategoryList()
    },
    // 编辑分类并且修改数据
    editcate(cate){
      this.editcateform = cate
      this.editdialogVisible = true
    },
    // 确认分类的修改并且向服务器发送修改的请求
     confirmedit(){
      this.$refs.editcateref.validate(async valid=>{
        if(!valid) return this.$message.error('修改失败')
        const {data:res} = await netrequest({method:'put',url:'categories/'+this.editcateform.cat_id,data:{cat_name :this.editcateform.cat_name}})
        if(res.meta.status !==200) return this.$message.error(res.meta.msg)
        this.editdialogVisible = false
      })
    },
    // 取消分类的修改
    closeedit(){
      this.editdialogVisible = false
      this.$refs.editcateref.resetFields()
    },
    // 删除分类并且向服务器发送删除的数据
    async deletecate(cate){
      const res = await this.$confirm.confirm('此操作将永久删除该分类吗？, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>{
          err
        })
        if(res !=='confirm') return this.$message.error('已取消删除')
       const {data:result} = await netrequest({method:'delete',url:'categories/'+cate.cat_id},)
        console.log(result);
        if(result.meta.status !==200) return this.$message.error(result.meta.msg)
        this.GetCategoryList()
    },
    // 添加分类并且向服务器发送请求
    async addcate(){
      const {data:res} = await netrequest({method:'get',url:'/categories',params:{type:2}})
      if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
        console.log(res);
      this.parentcatelist = res.data
      this.adddialogVisible = true
      console.log(this.parentcatelist);
    },
    //当级联选择器一旦发生变化，就调用该方法，然后利用双向绑定的value值为元素id属性selectcateid的数组，来判断添加分类的数据的各个属性的值
    catelevelchange(){
      if(this.selectcateid.length > 0){
        this.addcateform.cat_pid = this.selectcateid[this.selectcateid.length-1]
        this.addcateform.cat_level = this.selectcateid.length
      }else{
        this.addcateform.cat_pid = 0
        this.addcateform.cat_level = 0
      }
    },
    //确定添加的分类，然后把添加分类的数添加到发送请求的请求体中
    confirmaddcate(){
      // console.log(this.addcateform);
      this.$refs.addcateref.validate(async valid=>{
        if(!valid) return
        const {data:res} = await netrequest({method:'post',url:'categories',data:this.addcateform})
          // console.log(res);
          if(res.meta.status !==201) return this.$message.error(res.meta.msg)
          
          this.GetCategoryList()
          this.adddialogVisible = false
      })
    },
    // 当添加分类页面的弹出框一旦关闭就清除里面的值
    addcateclose(){
      this.$refs.addcateref.resetFields()
      this.selectcateid = 0
      this.addcateform.cat_pid = 0
      this.addcateform.cat_level = 0
    }
    // 添加分类为这一部分中较为困难的功能：
      // 大概思路，详细步骤看代码
      // 1.首先设置添加分类的ui结构，然后设置一个添加分类的变量，设置相应的属性，给输入框绑定该变量的name属性
      // 2.其次就是级联选择器的设置，在点击添加分类页面的同时，向服务器发送请求数据，去请求所有两层分类的数据（
      // 因为没有第四级数据，所以最低只能设置第三层数据），然后将请求的数据保存到父级数据列表的变量中。
      // 3.然后级联选择器的话有数据源绑定，然后绑定该父级数据列表变量，并且还要根据配置对象来把数据源渲染到级联选择器上，
      // 然后设置配置对象，配置对象中的value为元素的属性值，label是根据元素的属性值显示，children是第二层的渲染是根据数据源中的哪个属性渲染的
      // 4.级联选择器有一个双向数据绑定，然后给这个双向数据绑定设置为一个变量，当级联选择器的配置对象中的value值改变了，然后这个变量中存放的id值
      // 也会发生变化
      // 5.然后根据级联选择器得改变的监听事件来执行相应的函数，然后根据双向绑定的存放id的数组的长度。来设置添加分类变量的属性，
      // 其中pid是根据有该数组的索引号得来，并且索引号是根据西湖组的长度减一，plevel则是根据数组的长度来决定的。
      // 6.最后向服务器发送post请求添加该数据
  }
  ,
  created(){
    this.GetCategoryList()
  }
}
</script>

<style scoped>
.cascader{
  width: 100%;
}

</style>